<template>
  <el-dialog :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" width="1200px" @open="open" @close="close" append-to-body>
    <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="150px" :disabled="showDisabled">
      <el-timeline>
        <el-timeline-item v-for="(item, index) in model.customerTaskList" :key="index + 'competitor'" color="#0A6ED2" style="margin-bottom: 20px;">
          {{ '任务' + (index + 1) }}
          <el-row>
            <el-col :span="12">
              <el-form-item label="任务名称" :prop="'customerTaskList.' + index + '.taskname'" :rules="rules.validateRequire">
                <el-input v-model="item.taskname"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <tl-customer-analysis style="margin-left: 140px;margin-bottom: 10px" ref="customer" :parentId="parentId" :showDisabled="showDisabled" :planstate="model.state" :taskId="item.id" :customerTask="item"></tl-customer-analysis>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否需要系统部支持" :prop="'customerTaskList.' + index + '.needsupport'" :rules="rules.validateRequire">
                <el-select v-model="item.needsupport" filterable clearable>
                  <el-option v-for="item in codeModel.needsupportList" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="客户关系改善计划" :prop="'customerTaskList.' + index + '.improveplan'" :rules="rules.validateRequire">
                <el-input v-model="item.improveplan" type="textarea" maxlength="1000" show-word-limit :rows="4" placeholder="分析该任务决策链上，最支持以及最不支持的部门、职务；评估最需要突破的关键客户职务，计划通过什么方式提升关键客户关系"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="8">
            <el-button type="text" size="medium" icon="el-icon-remove-outline" v-if="!showDisabled" style="margin-left:140px" @click="removeCustomerTask(item, index)">删除任务</el-button>
          </el-col>
        </el-timeline-item>
      </el-timeline>
    </el-form>
    <div style="margin: 20px 0; width: 100%; height: 50px; text-align: center" v-if="!showDisabled">
      <el-button type="text" :disabled="showDisabled" icon="el-icon-circle-plus-outline" size="medium" @click="addCustomerTask()">
        添加任务
      </el-button>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :type="disableEditSubmit === false ? 'text' : 'primary'" @click="doCancelEdit">取消</el-button>
      <el-button type="primary" @click="updateInfo" :loading="saveLoading" v-if="!showDisabled">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
/** mixins */
import { mixin_edit } from '@tapui/mixins/mixin_edit'
import tlCustomerAnalysis from '../mpmCustomerAnalysis/indexForCustomerTask'
/** 子组件 */
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
  mixins: [mixin_edit],
  components: { tlCustomerAnalysis },
  data() {
    return {
      moduleTitle: '客户决策分析',
      urlPrefix: '/mpm/customerTask/',
      url: {
        // 额外的url
        customerTaskLoadInfo: '/mpm/customerTask/customerTaskLoadInfo',
        updateInfo: '/mpm/customerTask/updateInfo',
        addCustomerTask: '/mpm/customerTask/addCustomerTask',
        removeCustomerTask: '/mpm/customerTask/removeCustomerTask'
      },
      isshowdisable: false
    }
  },
  props: {
    parentId: {
      type: [Number, String],
      default: ''
    },
    showDisabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    open() {
      this.model = {}
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
        if (this.isAdd === true) {
          this.title = '添加' + this.moduleTitle
          this.customerTaskLoadInfo().then((_) => {
            this.loaded()
          })
        } else if (this.disableEditSubmit === false) {
          this.title = '编辑' + this.moduleTitle
          this.customerTaskLoadInfo().then((_) => {
            this.loaded()
          })
        } else {
          this.title = '查看' + this.moduleTitle
          this.customerTaskLoadInfo().then((_) => {
            this.loaded()
          })
        }
      })
    },
    loaded() {
      // 页面加载完毕执行
    },
    customerTaskLoadInfo() {
      if (this.parentId !== '') {
        return getAction(this.url.customerTaskLoadInfo, { id: this.parentId }).then((res) => {
          if (res.success) {
            this.$set(this.model, 'customerTaskList', res.result.customerTaskList)
          } else {
            this.$tap.alert(res.message, 'warning')
          }
        })
      } else {
        this.$tap.alert('获取策划id错误,请联系管理员!', 'warning')
        return
      }
    },
    // 更新全部任务
    updateInfo() {
      postAction(this.url.updateInfo, { customerTaskList: this.model.customerTaskList, planid: this.parentId }).then((res) => {
        if (res.success) {
          this.$tap.message('保存成功！', 'success')
          this.doCancelEdit()
        } else {
          this.$tap.alert(res.message, 'warning')
        }
      })
    },
    // 新增任务
    addCustomerTask() {
      let sortcode = this.model.customerTaskList.length > 0 ? this.model.customerTaskList[this.model.customerTaskList.length - 1].sortcode + 1 : 1
      const param = {
        planid: this.parentId,
        sortcode: sortcode
      }
      postAction(this.url.addCustomerTask, param).then((res) => {
        if (res.success) {
          this.model.customerTaskList.push(res.result)
          this.$tap.message('添加成功！', 'success')
        } else {
          this.$tap.alert(res.message, 'warning')
        }
      })
    },
    // 删除任务
    removeCustomerTask(item, index) {
      this.$tap
        .confirm('确定删除任务吗？')
        .then((_) => {
          deleteAction(this.url.removeCustomerTask, { id: item.id }).then((res) => {
            if (res.success) {
              this.model.customerTaskList.splice(index, 1)
              this.$tap.message('删除成功！', 'success')
            } else {
              this.$tap.alert(res.message, 'warning')
            }
          })
        })
        .catch((_) => {})
    },
    doCancelEdit() {
      this.visible = false
      this.$emit('refresh')
    },
    close() {
      this.visible = false
      this.$emit('refresh')
    }
  }
}
</script>
